<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="add">
            品牌名称:
            <input type="text" v-model="name" v-focus>
            <!-- 当没有输入时禁用 -->
            <input :disabled="name.length===0" v-on:click="add" type="button" value="添加">
        </div>

        <div class="add">
            品牌名称:
            <input type="text" v-model='searchVal' placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <!-- 冒号和key之间不能有空格，否则渲染不出来 -->
                <tr v-for="(item,index) in newList" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date| DateFormat}}</td>
                    <td>
                        <a href="#" @click="deleteItem(item.id)">删除</a>
                    </td>
                </tr>
                <tr v-if="newList.length===0">
                    <td colspan="4">没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script src="./moment.js"></script>
    <script src="./axios.min.js"></script>
    <script>
        /* 
        1. 静态页面 准备
        2. 实例化一个Vue
        3. 定义表格数据
        4. 采用v-for 循环将静态内容切换为动态内容
        5. 采用v-if控制提示消息
        */
        // 准备数据
        let vm = new Vue({
            el: "#app",
            data: {
                list: [{name:"小熊饼干",date:new Date()},
                    {name:"丽丽薯片",date:new Date()},
                    {name:"可口可乐",date:new Date()},
                ],
                name:'',  //初始化为空，是为了添加的时候输入框为空时禁止点击
                searchVal: ''
            },
            mounted(){
                axios.get('http://localhost:3000/brands').then(result=>{
                    this.list = result.data;
                }).catch(error=>{
                    console.log(error);
                })
            },
            methods:{
                add: function () {
                    axios.post("http://localhost:3000/brands",{
                        name: this.name,
                        date: new Date()
                    }).then(res=>{
                        this.getData();
                    }).catch(error=>{
                        console.log(error);
                    })
                },
                deleteItem: function (id) {
                    if (confirm("确认删除吗？")) {
                        console.log(id);
                        axios.delete("http://localhost:3000/brands/"+id).then(res=>{
                            console.log(res);
                            this.getData();
                        }).catch(error=>{
                            console.log(error);
                        });

                    }
                },
                getData: function (){
                    axios.get("http://localhost:3000/brands").then(result=>{
                        this.list = result.data;
                    }).catch(error=>{
                        console.log(error);
                    })
                }
            },
            filters: {
                DateFormat: function (value){
                    return moment(value).format("yyyy-MM-DD")
                }
            },
            directives: {
                    focus: {
                        inserted(dom) {
                            dom.focus();
                        }
                }
            },
            computed: {
                // 不能在computed里面用异步功能，因为computed必须有返回值
                // 以下面的代码为例，还没有等axios取到结果，可能空的result就已经被返回出去了。
                // 控制台打印输出的是1-3-2
                // 要实现异步查询搜索功能，需要用watch实现
                /*newList(){
                    let result;
                    console.log(1)
                    axios.get("http://localhost:3000/brands/name_like="+this.searchVal)
                    .then(res=>{
                        result = res;
                        console.log(2)
                    }).catch(error=>{
                        console.log(error);
                    })
                    console.log(3)
                    return result;
                }*/

                newList() {
                    return this.list.filter(v => {
                        let flag = false;
                        if (this.searchVal == '') {
                            return true;
                        }
                        o:for (let i = 0; i < v.name.length; i++) {
                            if (v.name.charAt(i) == this.searchVal.charAt(0)) {
                                for (let k = 0; k < this.searchVal.length; k++) {
                                    if (this.searchVal.charAt(k) != v.name.charAt(i + k)) {
                                        break o;
                                    } else if (k == this.searchVal.length - 1) {
                                        flag = true;
                                        break o;
                                    }
                                }
                            }
                        }
                        return flag;
                    })
                }
            },
            watch: {
                // 用watch监听searchVal，newV表示新值，oldV表示旧值
                // axios异步查询searchVal的新值，把查询结果赋值给list
                searchVal(newV,oldV){
                    axios.get("http://localhost:3000/brands/name_like="+newV)
                    .then(res=>{
                        this.list = res.data
                    })
                    .catch(error=>{
                        console.log(error)
                    })
                }
            }
        })

    </script>
</body>

</html>